<template>
  <div class="test">
    <basic-container>
      <el-radio-group v-model="category">
        <el-radio-button
          v-for="item of categoryList"
          :key="item.projectGaugeTypeId"
          :label="item.projectGaugeTypeId"
        >
          {{ item.typeName }}
        </el-radio-button>
      </el-radio-group>
      <!-- @on-load="onLoad" -->
      <avue-crud :option="option" :data="data" @refresh-change="onLoad">
        <template slot="status" slot-scope="scope">
          <!-- <el-tag>{{ scope }}</el-tag> -->
          <span v-if="scope.row.isTested"> 已完成 </span>
          <span v-else> 未完成 </span>
        </template>
        <template slot-scope="{ type, size, row }" slot="menu">
          <span v-if="row.isTested"> 无需再次测评 </span>
          <el-button
            v-else
            :size="size"
            type="primary"
            @click="goToTestDetails(row)"
          >
            开始测评
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { geGaugetype, geMeasureList } from "@/api/test";
import { mapGetters } from "vuex";
import request from "@/router/axios";

export default {
  name: "Test",
  data() {
    return {
      category: "",
      categoryList: [],
      data: [],
      option: {
        // addBtnText: "添加量表",
        addBtn: false,
        excelBtn: false,
        delBtn: false,
        editBtn: false,
        border: true,
        index: true,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 250,
        column: [
          // {
          //   width: 130,
          //   label: "编码",
          //   prop: "gaugeNo"
          // },
          {
            label: "标识图",
            prop: "classesName",
            type: "upload",
            listType: "picture-img",
            tip: "请上传 .png,.jpg 格式图片",
            action: "/api/blade-file/file/uploadFile",
            propsHttp: {
              res: "data",
              url: "fileUrl",
            },
            row: true,
          },
          {
            label: "普查名称",
            prop: "projectName",
          },
          // {
          //   label: "适用人群",
          //   prop: "gradeName",
          // },
          {
            label: "指导语",
            prop: "accessRemark",
            // width: 400,
          },
          {
            label: "状态",
            prop: "status",
          },
          {
            label: "年度",
            prop: "yearly",
            overHidden: true,
            type: "select",
            props: {
              label: "yearly",
              value: "yearly",
            },
            dicUrl: "/api/blade-measure/measure/term/listAll",
          },
          {
            label: "学期",
            prop: "term",
            overHidden: true,
            type: "select",
            props: {
              label: "term",
              value: "termId",
            },
            dicUrl: "/api/blade-measure/measure/term/listAll",
          },
          // {
          //   label: "答题时间",
          //   prop: "cost"
          // }
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    category() {
      if (!this.category) return;
      this.onLoad();
    },
  },
  methods: {
    async getCategoryList() {
      const {
        data: { data },
      } = await geGaugetype();
      this.categoryList = data;
      if (data.length > 0) {
        this.category = data[0].projectGaugeTypeId;
      }
    },
    async onLoad() {
      const tenantId = this.userInfo.tenantId;
      const {
        data: { data },
      } = await geMeasureList(1, 100, {
        gaugeTypeId: this.category,
        tenantId: tenantId,
        status: 1,
      });

      const records = await this.judgeTested();

      // console.log(data);
      // debugger;
      this.data = data.records.map((item) => {
        item.isTested = records.some(
          ({ projectId }) => projectId === item.projectId
        );

        return item;
      });
    },
    goToTestDetails({ gaugeTypeId, projectId }) {
      // debugger;
      this.$router.push({
        name: "心理测评详情",
        query: { projectGaugeTypeId: gaugeTypeId, projectId: projectId },
      });
    },
    getProjectList(userId) {
      const url = `/api/blade-measure/measure/userprojectgauge/page?current=1&size=500&includeId=${userId}`;

      return request.get(url);
    },
    async judgeTested() {
      const { userId } = this.$store.state.user.userInfo;
      const {
        data: {
          data: { records },
        },
      } = await this.getProjectList(userId);
      return records;
      // this.data.forEach(item => {

      // })
    },
  },
  mounted() {
    this.getCategoryList();
    // this.$router.push({
    //   name: "心理测评详情"
    // });
  },
};
</script>

<style lang="scss" scoped>
.test {
}
</style>
